<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #app{
      width: 800px;
      margin: 100px auto;
    }
    .count{
      width: 100%;
    }
    img{
        width: 100%;
    }
    span{
       display: inline-block;
       line-height: 50px;
       width: 80px;
       text-align: center;
       cursor: pointer;
    }
</style>
<body>
    <div id="app">
        <section style="background: #ccc;">
           <span v-for="(item,i) in list" :style="{background:i==index?'#fff':'#ccc'}" @click="cut(i)">{{item.name}}</span>
        </section>
       <div class="count">
           <img :src="list[index].url" alt="">
       </div>
    </div>
</body>
</html>
<script>
    new Vue({
      el: "#app",
      data: {
        list:[
            {name:'沉鱼',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2Fix8VLmn%3DcIYiMVMP0mN8MRJUqw2YKhSya49KY0tqGJ0d71547607870123compressflag.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635151542&t=2035a40b46c0713408e8799581a10987'},
            {name:'落雁',url:'https://img0.baidu.com/it/u=1632643201,1281480348&fm=26&fmt=auto'},
            {name:'闭月',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.soyoung.com%2Fpost%2F20150701%2F5%2F20150701111538842.jpg&refer=http%3A%2F%2Fimg2.soyoung.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635153645&t=8effe4e30e088848420210d9ccf790ec'},
            {name:'羞花',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Feladies%2F3_img%2Fupload%2F4e8441c4%2F20170328%2FFyvn-fyctevp9017597.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635153723&t=1236582715300d2f01c051a90c8eb104'}
        ],
        index: 0, // 存放点击tab的索引的
      },
      methods: {
        cut(i){
           this.index = i;
        }
      },
    })


    // let arr = [1,2,3,4]
    // arr.forEach(a => {
    //     console.log(a);
    // })
</script>